<template>
  <div>
    <template v-if="Object.keys(firstTopicData.data).length > 0">
      <div class="answersFirstTopicList">
        <div v-for="(data,key) in firstTopicData.data" :key="key">
          <h3>{{ key }}</h3>
          <ul>
            <li v-for="item in data" :key="item.id">
          <span @click="getInfoById(item.id, item.meetingName)">{{
              item.meetingName
            }}&nbsp;&nbsp;&nbsp;{{ item.meetingDate | dateFormat }}</span>
            </li>
          </ul>
          <div class="download_btn">
            <span>另有{{ firstTopicData.dataLength }}条记录</span>
            <button @click="fileDownload()">下载巡检结果</button>
          </div>
        </div>
      </div>
    </template>
    <template v-else>
      <div class="answersFirstTopicListNull">
        <span>巡检结果为：无异常。</span>
      </div>
    </template>
  </div>
</template>



<script>
import dayjs from "dayjs";
import API from "@/api/api-chat-list";
import {setQueryInTellingPatrolInspect} from "@/utils/setChatStoreData";
import AesGcm from "@/utils/aesgcm";

export default {
  name: "AnswersFirstTopicList",
  data() {
    return {
      firstTopicData: this.$store.state.firstTopicData,
      firstTopicSearchData: {},
    }
  },
  created() {
    this.firstTopicSearchData = this.$store.state.firstTopicSearchData;
  },
  methods: {
    async getInfoById(id, name) {
      const param = {
        id: id
      }
      this.$store.state.firstTopicContent = await API.getInfoById(param);
      setQueryInTellingPatrolInspect(this, name, 'diYiYiTiObject');
    },
    // 第一议题巡检内容下载
    fileDownload() {
      this.firstTopicSearchData.timestamp = dayjs().valueOf();
      const url = new URL(AesGcm.decrypt(process.env.VUE_APP_INTERFACE_URL) + '/diYiYiTi/downloadGet');
      url.search = new URLSearchParams(this.firstTopicSearchData).toString();
      MXCommon.download(url.toString());
    }
  },
  filters: {
    dateFormat(timestamp) {
      return dayjs(timestamp).format('YYYY-MM-DD');
    }
  }
}
</script>

<style type="text/css">
.answersFirstTopicList {
  background-color: #fee5e5;
  padding: 15px 10px;
  border-radius: 10px;
  line-height: 25px;
}

.answersFirstTopicList h3 {
  color: #ff0000;
  font-size: 1.2em;
}

.answersFirstTopicList li {
  margin-top: 10px;
  margin-left: 0.5em;
}

.answersFirstTopicList li span {
  font-size: 1em;
  font-weight: bold;
}

.answersFirstTopicList .download_btn {
  text-align: right;
  margin-right: 20px;
  margin-bottom: 10px;
}

.answersFirstTopicList .download_btn span {
  margin-right: 40px;
  color: red;
  font-weight: bold;
}

.answersFirstTopicList .download_btn button {
  padding: 6px;
  color: red;
  border-radius: 10px;
  border: 1px solid red;
  background-color: white;
  margin-top: 20px;
}

.answersFirstTopicListNull {
  background-color: white;
}

</style>


